<template>
  <div class="box">
    <button @click="isShowDialog">下一步</button>
    <show-dialog v-show="dialog" 
    :providerData="provider_data"
    @submitCode="submitCode"
    ></show-dialog>
  </div>
</template>

<script>
import showDialog from './dialog'
export default {
  name: 'test',
  data () {
    return {
      dialog: false,
      provider_data: [{
        provider_partner_id: 2000402,
        provider_partner_name: '快钱协议支付',
        channel_priority: 1,
        BANK_CODE: 'icbc',
        BANK_NAME: '中国工商银行',
        disabled: true,
        vCode: '',
        count: 60,
        show: true,
        errorMsg: '',
        btnTxt: '重新发送',
        valid_code: ''
      }, {
        provider_partner_id: 1601,
        provider_partner_name: '宝付协议支付',
        channel_priority: 2,
        BANK_CODE: 'icbc',
        BANK_NAME: '中国工商银行',
        disabled: true,
        vCode: '',
        count: 60,
        show: true,
        errorMsg: '',
        btnTxt: '发送',
        valid_code: ''
      }]
    }
  },
  components: {
    showDialog
  },
  methods: {
    submitCode (code) {
      for (let i = 0; i < this.provider_data.length; i++) {
        this.provider_data[i].vCode = code
        this.provider_data[i].errorMsg = '还剩2次验证短信次数'
      }
     console.log('submit', this.provider_data)
    },
    isShowDialog () {
      this.dialog = true
    }
  }
}
</script>

<style scoped>
  .box {
    text-align: center;
    margin-top: 20%;
  }
  .box button{
    background: #FF8F00;
    border: none;
    color: #fff;
    font-size: 18px;
    padding: 5px 10px;
  }
</style>
